@import 'common';

@tag-color: #f48f18;
@boder-color: #ddd;

.first {
   margin: 0; 
}

h6 {
    margin: 0;
}
body {
    font-family: PingFangSC-Light,helvetica,'Heiti SC';
}

.payment-container {
    
    .container-part {
        margin-top: .2rem;
        padding: .3rem;
        font-size: .22rem;
        color: @font-medium-color;
        background: @inner-background;
        i {
            float: right;
            font-size: .5rem;
            vertical-align: middle;
            line-height: .7rem;
        }
    }
    
    .first {
       margin: 0; 
    }
    
    .container-border-bg {
        width: @width;
        height: .1rem;
        background: url(../img/payment/payment-border-bg.png);
        background-size: auto .1rem;
    }
        
    .container-address {
        .address-info-wrapper {
            display: flex;
            .info-user-wrapper {
                flex: 1;
                line-height: .3rem;
                .address-username {
                    display: block;
                }
                .address-tag {
                    float: none;
                    padding: .02rem .05rem;
                    font-style: normal;
                    font-size: .12rem;
                    color: @strong-color;
                    border: .01rem solid @strong-color;
                }
            }
            
            .info-content-wrapper {
                width: 75%;
                .content-phone {
                    font-size: .22rem;
                    color: @font-dark-color;
                }
            }
        }
    }
    
    .container-benefit {
        .benefit-list {
            padding: 0;
            .list-item {
                line-height: .7rem;
                border-top: .01rem solid @boder-color;
                a {
                    color: @font-medium-color;
                    .benefit-right {
                        float: right;
                        .benefit-num-wrapper {
                            margin-right: .2rem;
                        }
                    }
                }
            }
            
            .first {
                border: 0;
            }
        }
    }
    
    .container-comes {
        .comes-content {
            padding: 0;
            .content-item {
                display: flex;
                line-height: .7rem;
                .item-money {
                    width: 1rem;
                    text-align: right;
                }
                
                .item-left {
                    position: relative;
                   flex: 1;
                   .item-short-wrapper {
                        display: inline;
                        .item-short {
                            line-height: .3rem;
                            margin-top: .2rem;
                            margin-right: .2rem;
                            padding: .02rem .05rem;
                            text-align: right;
                            font-style: normal;
                            font-size: .18rem;
                            color: @tag-color;
                            border: .01rem solid @tag-color;
                        }
                        
                        .item-short-triangle-wrapper {
                            position: absolute;
                            top: 50%;
                            margin-top: -.05rem;
                            right: 0;
                            margin-right: .03rem;
                            display: inline-block;
                            width: .1rem;
                            height: .1rem;
                            .item-short-triangle-box {
                                position: absolute;
                                top: 50%;
                                right: 0;
                                margin-top: -.05rem;
                                .triangle (right, .1rem, @tag-color);
                            }
                            
                            .item-short-triangle-inner {
                                position: absolute;
                                top: 50%;
                                right: .03rem;
                                margin-top: -.04rem;
                                .triangle (right, .08rem, @font-light-most-color);
                            }
                        }
                    }
                }
            }
        }
    }
    
    .container-goods {
        .goods-details {
            display: flex;
            align-items: center;
            .details-pic {
                width: 1rem;
                img {
                    width: @width;
                }
            }
            
            .details-spec {
                flex: 1;
                .spec-goodsname {
                    font-size: .24rem;
                    font-weight: 400;
                    color: @font-medium-color;
                }
                .spec-color {
                    line-height: .3rem;
                    float: none;
                    font-style: normal;
                    font-size: .16rem;
                }
                .spec-money {
                    line-height: .4rem;
                    color: @font-dark-color;
                }
            }
            
            .details-num {
                width: .1rem;
                
            }
        }
    }
    
    .container-agree {
        font-size: .12rem;
        color: @font-light-color;
        a {
            display: inline;
            margin-left: .1rem;
            color: @font-light-color;
        }
    }
  
}

.payment-footer {
    display: flex;
    line-height: .6rem;
    font-size: .22rem;
    background: @inner-background;
    .footer-totalmoney {
        padding-left: .2rem;
        flex: 1;
        color: @strong-color;
    }
    .footer-button{
        width: 1.5rem;
        text-align: center;
        color: @font-light-most-color;
        background: @strong-color;
    } 
}
